<script setup>
import { ref,onMounted } from 'vue';
import moment from 'moment'
import axios from 'axios';
import record from './components/record.vue'
import myComalert from './components/alert.vue'
const myRecord = ref();
const myAlert = ref();
const myLucky = ref();
const blocks= ref([{ background: '#617df2' }])
const prizes= ref([])
const buttons= ref([{
  radius: '25%',
  background: '#8a9bf3',
  pointer: true,
  imgs:[
    {
      src: new URL("./assets/zhuanpanBot.png",import.meta.url),
      width:"70px",
      height:"105px",
      top:"-65px"
    }
  ]
}])

const nowIndex = ref(0);
const nowJiang = ref({});

const startCallback  = async () => {
  // 调用抽奖组件的play方法开始游戏
  if(myData.value.re_num<1){
    alert("无可用次数")
    return;
  }
  const { data } = await axios.get("/api/zp_probability",{
    params: {
        activity_id:window.activity_id
      }
  });
  nowJiang.value = data.data;
  nowIndex.value = myData.value.prize.findIndex(x=>x.id===data.data.id);
  myLucky.value.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
      // 假设后端返回的中奖索引是0
      // 调用stop停止旋转并传递中奖索引
      myLucky.value.stop(nowIndex.value)
    }, 3000)
}
const endCallback = () => {
  myAlert.value.setAlert(true);
  myAlert.value.setPrize({ ...nowJiang.value });
}

const toRecord = ()=>{
  myRecord.value.setRecord(true);
}

let myData= ref({
  data:{},
  prize:[{}],
  rule:{}
})
const openid = ref('');
const access_token = ref('');
onMounted(async ()=>{
  
  const { data } = await axios.get("/api/gk_get_access_token",{
    params: {
        code:window.code,
        mode:window.mode,
        activity_id:window.activity_id
      }
  });
  myData.value=data.data;
  window.openid=data.data.open_id;
  window.accesstoken=data.data.access_token;
  data.data.prize=[...data.data.prize]
  if(data.data.prize.length%2==0){
    data.data.prize.forEach((x,i)=>{
      if(i%2==0){
        prizes.value.push({ fonts: [{ text: x.name, top: '10%',fontColor:"#BF3100", fontSize:"14px" }], background: '#FFEEB5' })
      }else{
        prizes.value.push({ fonts: [{ text: x.name, top: '10%',fontColor:"#BF3100", fontSize:"14px" }], background: '#FFE283' })
      }
    })
  }else{
    let colorArr = ["#FFEEB5","#FFE283","#FFD64F"]
    let cIndex = 0;
    data.data.prize.forEach((x,i)=>{
      cIndex++;
      prizes.value.push({ fonts: [{ text: x.name, top: '10%',fontColor:"#BF3100", fontSize:"14px" }], background: colorArr[cIndex-1] })
      if(cIndex%3==0){
        cIndex=0;
      }
      
      // if(n%2==0){
      //   prizes.value.push({ fonts: [{ text: x.name, top: '10%',fontColor:"#BF3100", fontSize:"14px" }], background: '#FFEEB5' })
      // }else{
      //   console.log("cc>>",colorFlag,x.name)
      //   if(colorFlag){
      //     colorFlag=false;
      //     prizes.value.push({ fonts: [{ text: x.name, top: '10%',fontColor:"#BF3100", fontSize:"14px" }], background: '#FFE283' })
      //   }else{
      //     colorFlag=true;
      //     prizes.value.push({ fonts: [{ text: x.name, top: '10%',fontColor:"#BF3100", fontSize:"14px" }], background: '#FFD64F' })
      //   }
      // }
    })
  }
  
  console.log("data>>",myData.value.data.startTime)
})

</script>

<template>
  <div>
    <div style="height: 90px;" ></div>
    <div class="titlePan" ></div>
    <div class="timePan" >活动时间：{{ moment(myData.data.startTime).format("YYYY-MM-DD") }}至{{ moment(myData.data.endTime).format("YYYY-MM-DD") }}</div>
    <div style="height: 24px;" ></div>
    <div class="quanPan" >
      <div class="imgPan" >
        <img src="./assets/zhuanpan.png" />
      </div>
      <div class="btnPan" @click="startCallback" >
        <img src="./assets/chouJiang.png" />
      </div>
      <div class="zhuanBody" >
        <LuckyWheel
        ref="myLucky"
        width="249px"
        height="249px"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        @end="endCallback"
        ></LuckyWheel>
      </div>
    </div>
    <div class="zjTitle" >
      <div style="flex: 1;" >剩余次数: {{ myData.re_num }}次</div>
      <div @click="toRecord" >中奖记录 &gt;</div>
    </div>
    <div style="height: 16px;" ></div>
    <div class="guizheTitle" ></div>
    <div style="opacity: 0.7;" >
        <div style="padding: 20px;font-size: 12px;line-height: 20px;color: #FFEEB5;font-weight: 500;font-family: PingFang SC-Medium, PingFang SC;">
          欢迎参加我们的大转盘活动！在参与之前,请仔细阅读以下规则: <br>
            1. 参与资格<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>本活动仅对在商家消费的个人开放。</li>
            </ul>
            2. 活动时间<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>大转盘活动将在指定日期和时间段内开展。请查看活动通知或页面以获取详细信息。 </li>
            </ul>
            3. 参与方式<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>参与者需要按照活动说明进行注册和参与。 </li>
                <li>每位参与者只能参与一次。</li>
                <li>参与方式需要根据商家的要求发布抖音视频方可有抽奖。</li>
            </ul>
            4. 奖品<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>奖品将根据大转盘结果确定。</li>
                <li>奖品可能因可获得的数量或类型而有所不同。 奖品不可转让、兑换现金或更改。 </li>
            </ul>
            5. 公平竞争<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>参与者需遵守公平竞争原则，不得使用不正当手段获得额外机会。</li>
                <li>任何作弊行为将导致取消资格。</li>
            </ul>
            6. 奖品发放<br>
            <ul style="padding: 0;margin: 0 0 0 20px;">
                <li>奖品将在活动结束后的指定时间内发放。</li>
                <li>获奖者将通过电子邮件或电话通知奖品的领取方式。</li>
            </ul>
            7. 隐私<br>
                <ul style="padding: 0;margin: 0 0 0 20px;">
                    <li>活动期间涉及的个人信息将受到隐私保护政策的保护。</li>
                    <li>我们将严格遵守适用的数据保护法规。</li>
                </ul>
            8. 取消或修改<br>
                    <ul style="padding: 0;margin: 0 0 0 20px;">
                        <li>主办方有权根据需要取消、修改或终止活动，恕不另行通知。</li>
                    </ul>
            9. 免责声明<br>
                        <ul style="padding: 0;margin: 0 0 0 20px;">
                            <li>参与者需明白，参加活动存在一定风险，主办方概不负责参与者的任何损失或伤害。</li>
                        </ul>
            10. 最终决定<br>
                            <ul style="padding: 0;margin: 0 0 0 22px;">
                                <li>主办方对活动的最终解释权归属主办方所有。</li>
                            </ul>
                            请在参与活动之前仔细阅读并理解以上规则。
                            如果您不同意这些规则，请不要参加活动。通过参与活动，您表示您已经同意并遵守这些规则。
                            如果您有任何疑问或需要进一步的澄清，请随时联系我们的客户支持团队。 
                            祝您好运，愿您在大转盘活动中获得幸运和喜悦！
        </div>
    </div>
    <record ref="myRecord" ></record>
    <myComalert ref="myAlert" ></myComalert>
  </div>
</template>

<style lang="less" scoped>

.titlePan{
    background: url(./assets/zhuanTitle.png);
    background-size: 308px 57px;
    background-repeat: no-repeat;
    width: 308px;
    height: 57px;
    margin: 0 auto;
}
.timePan{
  padding-top: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  opacity: 0.7;
  text-align: center;
}

.quanPan{
  width: 327px;
  height: 424px;
  position: relative;
  margin: 0 auto;
  z-index: 800;
  .imgPan{
    position: absolute;
    z-index: 800;
    img{
      width: 327px;
      height: 424px;
      display: block;
    }
  }
  .btnPan{
    position: absolute;
    z-index: 820;
    bottom: -15px;
    left: calc(50% - 130px);
    img{
      width: 245px;
      height: 49px;
      display: block;
    }
  }
  .zhuanBody{
    width: 249px;
    height: 249px;
    background: #FFEEB5;
    position: absolute;
    top: 36px;
    left: 39px;
    z-index: 810;
    border-radius: 50%;
  }
}

.zjTitle{
  padding-top: 39px;
  width: 245px;
  color: #FFEEB5;
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}

.guizheTitle{
  background: url(./assets/htdgzTitle.png);
  background-size: 89px 22px;
  background-repeat: no-repeat;
  width: 89px;
  height: 22px;
  margin: 0 auto;
}

</style>
